<template>
    <div id="checkout_counter_popup">
      <div class="cc_header">
        <div id="cch_member_info">
          <img :src=user.head class="cchmi_icon"/>
          <span class="cchmi_name">{{user.name}}</span>
          <span class="cchmi_vip_level">V1</span>
        </div>
        <div class="cc_popup_close"><i class="el-icon-error" style="color: #FFFFFF;" @click="doClose"></i></div>
        <div class="cch_coin_count"></div>
      </div>
      <ul id="cc_mem_types" style="padding-inline-start: 0px;">
        <li class="ccmt_item current" style="width:100%;list-style-type:none" data-code="0">
          <div class="ccmt_name"
               style="background-image: url(https://img.alicdn.com/tfs/TB1EIhBEYGYBuNjy0FoXXciBFXa-36-36.png)">蜗牛VIP
          </div>
          <div class="ccmt_desc">适用于电脑/手机/Pad</div>
        </li>
      </ul>
      <div id="cc_body">
        <div id="cc_products">
          <div class="ccp_top_desc">
            <span class="ccptd_title">套餐选择,点击付款</span>
            <hr>
            <!--<a class="ccp_activate" target="_blank" href="">会员卡激活></a>-->
          </div>
          <div class="ccp_four_item_list" style="height: 138px">
            <div class="ccpoil_product current" data-code="0" title="年度VIP" @click="onSubmit(pay.yearall)">
              <div class="ccpoil_product_name">年度VIP</div>
              <div class="ccpoil_color_marketing">送1个月酷喵会员，可去卡券包查看</div>
              <div class="ccpoil_price">
                <div class="ccpoil_currency">￥</div>
                <div class="ccpoil_final_price">{{pay.yearall}}</div>
                <div class="ccpoil_origin_price">198</div>
              </div>
            </div>
            <div class="ccpoil_product " data-code="1" title="半年VIP" @click="onSubmit(pay.yearbyhalf)">
              <div class="ccpoil_product_name">半年VIP</div>
              <div class="ccpoil_color_marketing">限时特惠</div>
              <div class="ccpoil_price">
                <div class="ccpoil_currency">￥</div>
                <div class="ccpoil_final_price">{{pay.yearbyhalf}}</div>
              </div>
            </div>
            <div class="ccpoil_product " data-code="2" title="季度VIP" @click="onSubmit(pay.season)">
              <div class="ccpoil_product_name">季度VIP</div>
              <div class="ccpoil_marketing">0.60 元/天</div>
              <div class="ccpoil_price">
                <div class="ccpoil_currency">￥</div>
                <div class="ccpoil_final_price">{{pay.season}}</div>
              </div>
            </div>
            <div class="ccpoil_product " data-code="3" title="连续包月VIP" @click="onSubmit(pay.month)">
              <div class="ccpoil_product_name">连续包月VIP</div>
              <div class="ccpoil_color_marketing">首3月6元/月，第4个月起15元/月，自动续费，可随时解约</div>
              <div class="ccpoil_price">
                <div class="ccpoil_currency">￥</div>
                <div class="ccpoil_final_price">{{pay.month}}</div>
                <div class="ccpoil_origin_price">15</div>
              </div>
            </div>
            <div class="ccpoil_product " style="margin-top: 26px" data-code="5" title="连续包年VIP"
                 @click="onSubmit(pay.yearbysuccession)">
              <div class="ccpoil_product_name">连续包年VIP</div>
              <div class="ccpoil_marketing">0.49 元/天</div>
              <div class="ccpoil_price">
                <div class="ccpoil_currency">￥</div>
                <div class="ccpoil_final_price">{{pay.yearbysuccession}}</div>
                <div class="ccpoil_origin_price">198</div>
              </div>
            </div>
          </div>


        </div>
      </div>
      <hr>
      <div id="cc_protocols">
        <a class="ccp_item" target="_blank">《蜗牛VIP会员服务协议》</a>
        <a class="ccp_item" target="_blank">《蜗牛VIP连续包服务协议》</a>
      </div>

    </div>
</template>

<script>
  export default {
    name: "pay",
    props: {
      dialog_visible: Boolean
    },
    data() {
      return {
        visible: this.dialog_visible,
        user: {
          id: "1",
          name: "云卷云舒",
          head: "https://static.youku.com/user/img/avatar/80/6.jpg"
        },
        pay: {
          yearall: "138",
          yearbyhalf: "108",
          season: "56",
          month: "6",
          yearbysuccession: "178"
        }
      }
    },
    watch: {
      visible(val) {
        this.dialog_visible = val;
      }
    },
    methods: {
      doClose() {
        // 触发父组件中的dialogVisibleEvent事件，并传递参数
        this.$emit('dialogVisibleEvent', false);
      },


      onSubmit(sizeForm) {
        alert(
          this.user.id + "=====" + sizeForm
        );

        /*window.location.href="api/wuai-user/user/pay/"+this.user.id+"/"+sizeForm;

        const h = this.$createElement;
        this.$msgbox({
          title: '等待支付',
          message: h('p', null, [
            h('span', null, '请在新打开的页面中完成支付 ')
          ]),
          showCancelButton: true,
          confirmButtonText: '已完成支付',
          cancelButtonText: '关闭',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  // this.$router.push('/oeuvre')
                  this.$router.push('/vip')
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'action: ' + action
          });
        });*/
      }
    },

  }
</script>

<style>
  [data-pay="w2"] #checkout_counter_popup {
    transform: translate(-50%, -50%) scale(0.8);
    -webkit-transform: translate(-50%, -50%) scale(0.8);
    -moz-transform: translate(-50%, -50%) scale(0.8);
    -o-transform: translate(-50%, -50%) scale(0.8);
    -ms-transform: translate(-50%, -50%) scale(0.8);
  }

  #checkout_counter_popup {
    position: fixed;
    top: 55%;
    left: 50%;
    width: 820px;
    height: 682px;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    z-index: 9999;
    border-radius: 3px;
  }

  #checkout_counter_popup {
    font-family: "PingFang SC", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif !important;
    box-sizing: border-box;
  }

  .cc_header {
    height: 60px;
    background: rgba(32, 33, 35, 0.9);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

  #cch_member_info {
    display: inline-block;
    height: 60px;
  }

  .cchmi_icon {
    float: left;
    display: inline-block;
    margin: 11px 0 11px 29px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
  }

  .cchmi_name {
    float: left;
    display: inline-block;
    margin-left: 7px;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #FFFFFF;
  }

  .cchmi_vip_level {
    display: inline-block;
    margin: 17px 0 18px 10px;
    padding: 0 10px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    color: #1C1C1C;
    background-image: linear-gradient(-234deg, #DAB873 0%, #D1AF6A 20%, #AD8B46 100%);
    border-radius: 12px 0 12px 0;
  }

  .cc_popup_close {
    float: right;
    margin-top: 0px;
    font-size: 30px;
    /*margin-right: 28px;*/
    /*width: 15px;*/
    height: 15px;
    cursor: pointer;
    background-position: 0 0;
    background-repeat: no-repeat;
  }

  #cch_coin_count {
    float: right;
    margin-right: 40px;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #828282;
  }

  #cc_mem_types {
    height: 70px;
    text-align: center;
  }
  /*ul{*/
    /*display: block;*/
    /*list-style-type: disc;*/
    /*margin-block-start: 1em;*/
    /*margin-block-end: 1em;*/
    /*margin-inline-start: 0px;*/
    /*margin-inline-end: 0px;*/
    /*padding-inline-start: 0px;*/
  /*}*/


  .ccmt_item.current {
    background: #fff;
  }

  .ccmt_item .ccmt_name {
    display: inline-block;
    margin: 8px auto 0;
    padding: 0 0 0 35px;
    height: 33px;
    line-height: 33px;
    font-size: 20px;
    background-position: 0 3px;
    background-size: 26px 26px;
    background-repeat: no-repeat;
  }

  .ccmt_item .ccmt_desc {
    margin-top: 3px;
    font-size: 12px;
  }

  #cc_body {
    height: 420px;
    overflow: auto;
  }

  #cc_products {
    min-height: 230px;
  }

  .ccp_top_desc {
    margin-top: 10px;
    padding: 0 30px;
    height: 50px;
    text-align: left;
    overflow: hidden;
  }

  .ccp_top_desc .ccptd_title {
    font-size: 18px;
    line-height: 25px;
    color: #000;
  }

  .ccp_top_desc .ccp_activate {
    float: right;
    font-size: 16px;
    line-height: 25px;
    color: #000;
  }

  .ccp_three_item_list, .ccp_four_item_list {
    width: 100%;
  }

  .ccp_one_item_list, .ccp_two_item_list, .ccp_three_item_list, .ccp_four_item_list {
    margin-top: 10px;
    height: 138px;
  }

  .ccp_three_item_list .ccpoil_product, .ccp_four_item_list .ccpoil_product {
    position: relative;
    float: left;
    margin-left: 30px;
    height: 138px;
    border: 1px solid #ad8f4a;
    border-radius: 2px;
    cursor: pointer;
  }

  .ccp_four_item_list .ccpoil_product {
    width: 167px;
    background: #EDD797;
  }

  .ccp_three_item_list .ccpoil_product.current, .ccp_four_item_list .ccpoil_product.current {
    background: #EDD797;
  }

  .ccp_three_item_list .ccpoil_product .ccpoil_product_name, .ccp_four_item_list .ccpoil_product .ccpoil_product_name {
    position: absolute;
    top: 12px;
    left: 0;
    padding: 0 10px;
    width: 100%;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    /*color: #896623;*/
    color: #000;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .ccp_four_item_list .ccpoil_color_marketing {
    left: 14px;
  }

  .ccp_three_item_list .ccpoil_product .ccpoil_color_marketing, .ccp_four_item_list .ccpoil_product .ccpoil_color_marketing {
    position: absolute;
    display: block;
    top: 100px;
    padding: 0 8px;
    width: 140px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    background-image: linear-gradient(45deg, #FFB167 0%, #FF2937 100%);
    box-shadow: 0 2px 4px 0 rgba(255, 76, 67, 0.53);
    border-radius: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .ccp_three_item_list .ccpoil_product .ccpoil_price, .ccp_four_item_list .ccpoil_product .ccpoil_price {
    position: absolute;
    top: 46px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .ccp_three_item_list .ccpoil_product .ccpoil_currency, .ccp_four_item_list .ccpoil_product .ccpoil_currency {
    margin-bottom: 0;
    margin-left: -3px;
    font-size: 16px;
    line-height: 23px;
    color: #896623;
  }

  .ccp_three_item_list .ccpoil_product .ccpoil_currency, .ccp_three_item_list .ccpoil_product .ccpoil_final_price, .ccp_three_item_list .ccpoil_product .ccpoil_origin_price, .ccp_four_item_list .ccpoil_product .ccpoil_currency, .ccp_four_item_list .ccpoil_product .ccpoil_final_price, .ccp_four_item_list .ccpoil_product .ccpoil_origin_price {
    display: inline-block;
    vertical-align: bottom;
    font-weight: lighter;
  }

  .ccp_three_item_list .ccpoil_product .ccpoil_final_price, .ccp_four_item_list .ccpoil_product .ccpoil_final_price {
    margin-left: -3px;
    font-size: 40px;
    line-height: 40px;
    /*color: #896623;*/
    color: #000;
  }

  .ccp_three_item_list .ccpoil_product .ccpoil_currency, .ccp_three_item_list .ccpoil_product .ccpoil_final_price, .ccp_three_item_list .ccpoil_product .ccpoil_origin_price, .ccp_four_item_list .ccpoil_product .ccpoil_currency, .ccp_four_item_list .ccpoil_product .ccpoil_final_price, .ccp_four_item_list .ccpoil_product .ccpoil_origin_price {
    display: inline-block;
    vertical-align: bottom;
    font-weight: lighter;
  }

  .ccp_three_item_list .ccpoil_product .ccpoil_origin_price, .ccp_four_item_list .ccpoil_product .ccpoil_origin_price {
    font-size: 16px;
    line-height: 20px;
    color: #626262;
    text-decoration: line-through;
  }

  .ccp_three_item_list .ccpoil_product .ccpoil_currency, .ccp_three_item_list .ccpoil_product .ccpoil_final_price, .ccp_three_item_list .ccpoil_product .ccpoil_origin_price, .ccp_four_item_list .ccpoil_product .ccpoil_currency, .ccp_four_item_list .ccpoil_product .ccpoil_final_price, .ccp_four_item_list .ccpoil_product .ccpoil_origin_price {
    display: inline-block;
    vertical-align: bottom;
    font-weight: lighter;
  }

  .ccp_three_item_list .ccpoil_product .ccpoil_marketing, .ccp_four_item_list .ccpoil_product .ccpoil_marketing {
    position: absolute;
    display: block;
    width: 100%;
    top: 103px;
    margin: auto;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    color: #000;
  }

  .ccp_three_item_list .ccpoil_product .ccpoil_currency, .ccp_three_item_list .ccpoil_product .ccpoil_final_price, .ccp_three_item_list .ccpoil_product .ccpoil_origin_price, .ccp_four_item_list .ccpoil_product .ccpoil_currency, .ccp_four_item_list .ccpoil_product .ccpoil_final_price, .ccp_four_item_list .ccpoil_product .ccpoil_origin_price {
    display: inline-block;
    vertical-align: bottom;
    font-weight: lighter;
  }

  .ccp_three_item_list .ccpoil_product .ccpoil_origin_price, .ccp_four_item_list .ccpoil_product .ccpoil_origin_price {
    font-size: 16px;
    line-height: 20px;
    color: #626262;
    text-decoration: line-through;
  }

  #cc_protocols {
    padding-right: 30px;
    height: 45px;
    text-align: center;
  }

  :link, :visited, ins {
    text-decoration: none;
  }

  #cc_protocols .ccp_item {
    display: inline-block;
    margin-top: 14px;
    margin-left: 10px;
    vertical-align: top;
    font-size: 12px;
    color: #999;
  }

  #checkout_counter_popup div, #checkout_counter_popup h1, #checkout_counter_popup h2, #checkout_counter_popup ul, #checkout_counter_popup li, #checkout_counter_popup ol, #checkout_counter_popup span, #checkout_counter_popup a, #checkout_counter_popup table, #checkout_counter_popup p, #checkout_counter_popup input, #checkout_counter_popup button, #checkout_counter_popup tr, #checkout_counter_popup td, #checkout_counter_popup th, #checkout_counter_popup img {
    box-sizing: border-box;
  }

  .ccp_three_item_list .ccpoil_product.current .ccpoil_product_name, .ccp_three_item_list .ccpoil_product.current .ccpoil_currency, .ccp_three_item_list .ccpoil_product.current .ccpoil_final_price, .ccp_four_item_list .ccpoil_product.current .ccpoil_product_name, .ccp_four_item_list .ccpoil_product.current .ccpoil_currency, .ccp_four_item_list .ccpoil_product.current .ccpoil_final_price {
    color: #000;
  }

</style>
